<template>
  <gui-page ref="guiPage" :customHeader="true">
    <template v-slot:gHeader>
      <nav-bar-custom left-icon="left" :title="data.title">
      </nav-bar-custom>
    </template>
    <template v-slot:gBody>
      <view :class="playIndex === null?'imgs':'img2'">
        <image v-if="playIndex === null" src="http://afl-private.oss-us-east-1.aliyuncs.com/afl-app/img/sop_default.jpg"
          style="width:100%" mode="widthFix"></image>
        <video id="myVideo" class="gui-course-video" :src="data.src" :poster="data.poster" controls v-else></video>
        <!-- <web-view :src="pdfUrl"></web-view> -->
        <view class="noticeHooks" v-if="playIndex === null">
						{{  $t('stockManage.without') }}
					</view>
      </view>
    </template>
  </gui-page>
</template>

<script setup>
import { onLoad } from "@dcloudio/uni-app"
import { reactive, ref } from 'vue'
import { navigate } from '@/utils/routerSkip.js';
import GuiSwitchNavigation from '@/Grace6/components/gui-switch-navigation.vue'
import NavBarCustom from '@/components/common/navBarCustom.vue'
import GuiPage from '@/Grace6/components/gui-page.vue'
import { getSopDetail, getSopFiles } from "@/api/api";
import parserHtml from "@/Grace6/js/parserHTML.js";
import GuiArticleInfo from "@/Grace6/components/gui-article-info.vue";


// 模拟一个视频地址减少代码量实际开发请在下面的视频数据中使用视频真实地址
const vsrc = 'http://afl-private.oss-us-east-1.aliyuncs.com/afl-app/img/sop_default.jpg'

const data = reactive({
  title: '',
  src: '',
  poster: vsrc,
  fileList: ''
})
let playIndex = ref(null)

onLoad((option) => {
  const uuid = option.uuid
  getSopDetail(uuid).then(res => {
    // console.log(res)
    data.detail = parserHtml.parserHTML(res.description);
    data.src = res.rquestUrl
    data.title = res.title;
  })
  getSopFiles(uuid).then(res => {
    if (res.length) {
      res.forEach((item, index, arr) => {
        console.log(item)
        playIndex = 'mp4'
        if (item.suffix === 'mp4') {
          data.fileList = item
          data.src = item.url
        }
      })
    }
  })
})

function sizeTostr(size) {
  var data = "";
  if (size < 0.1 * 1024) { //如果小于0.1KB转化成B
    data = size.toFixed(2) + "B";
  } else if (size < 0.1 * 1024 * 1024) {//如果小于0.1MB转化成KB
    data = (size / 1024).toFixed(2) + "KB";
  } else if (size < 0.1 * 1024 * 1024 * 1024) { //如果小于0.1GB转化成MB
    data = (size / (1024 * 1024)).toFixed(2) + "MB";
  } else { //其他转化成GB
    data = (size / (1024 * 1024 * 1024)).toFixed(2) + "GB";
  }
  var sizestr = data + "";
  var len = sizestr.indexOf("\.");
  var dec = sizestr.substr(len + 1, 2);
  if (dec == "00") {//当小数点后为00时 去掉小数部分
    return sizestr.substring(0, len) + sizestr.substr(len + 3, 2);
  }
  return sizestr;
}

</script>

<style scoped lang="scss">
.imgs {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 88rpx);
  box-shadow: inset 1px 0 0 hsl(0deg 0% 100% / 5%);
}
.imgs2 {
  display: flex;
  flex-direction: column;
  background-color: black;
  height: calc(100vh - 88rpx);
  box-shadow: inset 1px 0 0 hsl(0deg 0% 100% / 5%);
}

.gui-course-video {
  width: 750rpx;
  // height: calc(40vh - 88rpx);
  margin-top: calc(30vh - 88rpx);
  background-color: black;
}

.gui-course-info {
  padding: 20rpx 25rpx;
}

.gui-course-info-body {
  width: 200rpx;
  flex: 1;
}

.gui-course-info-share {
  width: 100rpx;
}

.title-spec {
  display: flex;
  flex-direction: row;
  padding: 30rpx 30rpx 0 30rpx;
}

.line-title {
  margin-top: 12rpx;
}

.gui-course-title {
  font-size: 32rpx;
  line-height: 50rpx;
  color: #333333;
}

.gui-course-info-text {
  font-size: 22rpx;
  line-height: 38rpx;
  margin-right: 30rpx;
  margin-top: 8rpx;
}

.card-b {
  background-color: #fff;
  margin-bottom: 20rpx;
}

.header {
  display: flex;
  flex-direction: row;
  margin-bottom: 10rpx;
}

.line {
  width: 6rpx;
  height: 30rpx;
  background: #37886C;
  margin-right: 14rpx;
}

.header-title {
  flex: 1;
}

.noticeHooks{
  margin-top: 20rpx;
  font-size: 17px;
}
</style>